<template>
    <div class="reportmian">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="数据筛选" name="1">
                <el-form :inline="true" class="divstyle" :model="selectfrom">
                    <el-form-item label="项目">
                        <el-select filterable  placeholder="请选择项目" v-model="selectfrom.Project">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目类型">
                        <el-select filterable  placeholder="请选择项目类型" v-model="selectfrom.ProjectType">
                            <el-option :value="0" label="全部"></el-option>
                            <el-option :value="1" label="施工生产"></el-option>
                            <el-option :value="2" label="产品生产"></el-option>
                            <el-option :value="4" label="产品研发"></el-option>
                            <el-option :value="8" label="技术服务"></el-option>
                            <el-option :value="16" label="其他"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.Start"
                                type="date"
                                placeholder="开始时间"
                                value-format="yyyy-MM-dd"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-date-picker
                                v-model="selectfrom.End"
                                type="date"
                                placeholder="结束时间"
                                value-format="yyyy-MM-dd"
                                format="yyyy - MM - dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="el-icon-search" @click="formdata"></el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="数据面板" name="2">
                <el-row>
                    <el-col align="center" style="font-size: 25px;font-weight: bold;">固远晨通科技发展有限公司项目费用支出台账</el-col>
                    <el-col>
                        <el-table :data="tableData"  border>
                            <el-table-column fixed type="index" label="序号" width="50" align="center" :index="indexMethod"></el-table-column>
                            <el-table-column label="项目名称" align="center" width="240" show-overflow-tooltip prop="ProjectName"></el-table-column>
                            <el-table-column label="项目编号" align="center" width="180" prop="ProjectNumber"></el-table-column>
<!--                            <el-table-column label="有无合同" align="center" show-overflow-tooltip >-->
<!--                                <template slot-scope="slot">-->
<!--                                    <label v-if="slot.row.ContractId==0"></label>-->
<!--                                    <label v-else>有</label>-->
<!--                                </template>-->
<!--                            </el-table-column>-->
<!--                            <el-table-column label="签订时间" align="center" show-overflow-tooltip >-->
<!--                                <template slot-scope="slot">-->
<!--                                    {{ fmtDateNew(slot.row.SignDate) }}-->
<!--                                </template>-->
<!--                            </el-table-column>-->
<!--                            <el-table-column label="合同名称" align="center" show-overflow-tooltip prop="Title"></el-table-column>-->
<!--                            <el-table-column label="客户" align="center" show-overflow-tooltip >-->
<!--                                <template slot-scope="slot">-->
<!--                                    {{ GetCustomerName(slot.row.CustomerId) }}-->
<!--                                </template>-->
<!--                            </el-table-column>-->
<!--                            <el-table-column label="合同额" align="center" show-overflow-tooltip prop="ContractPrice"></el-table-column>-->
                            <el-table-column label="结算金额" align="center" show-overflow-tooltip prop="SettleMoney"></el-table-column>
                            <el-table-column label="个人借款" align="center" show-overflow-tooltip prop="PersonLoan"></el-table-column>
                            <el-table-column label="采购费用" align="center" show-overflow-tooltip prop="PurchaseCost"></el-table-column>
                            <el-table-column label="人工费" align="center" show-overflow-tooltip prop="LaborCost"></el-table-column>
                            <el-table-column label="材料费" align="center" show-overflow-tooltip prop="MaterialCost"></el-table-column>
                            <el-table-column label="机械使用费" align="center" show-overflow-tooltip prop="MachineryCost"></el-table-column>
                            <el-table-column label="其他直接费" align="center" show-overflow-tooltip prop="OtherDirectCost"></el-table-column>
                            <el-table-column label="分包成本" align="center" show-overflow-tooltip prop="SubcontractingCost"></el-table-column>
                            <el-table-column label="冲销后税费" align="center" show-overflow-tooltip prop="WriteOffRate">
                                <template slot-scope="slot">
                                    {{ TaxPaytoFixed(slot.row.WriteOffRate) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="直接费用占比" align="center" show-overflow-tooltip prop="DirectTotalCostRate">
                                <template slot-scope="slot">
                                    {{ percentagetoFixed(slot.row.DirectTotalCostRate) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="管理人员工资" align="center" show-overflow-tooltip prop="ManagementPersonCost"></el-table-column>
                            <el-table-column label="职工福利费" align="center" show-overflow-tooltip prop="WelfareCost"></el-table-column>
                            <el-table-column label="固定资产使用费" align="center" show-overflow-tooltip prop="FixedAssetsCost"></el-table-column>
                            <el-table-column label="低值易耗品摊销" align="center" show-overflow-tooltip prop="LowValueCost"></el-table-column>
                            <el-table-column label="办公费" align="center" show-overflow-tooltip prop="OfficeCost"></el-table-column>
                            <el-table-column label="差旅费" align="center" show-overflow-tooltip prop="TravelCost"></el-table-column>
                            <el-table-column label="业务招待费" align="center" show-overflow-tooltip prop="BusinessCost"></el-table-column>
                            <el-table-column label="安全保护费" align="center" show-overflow-tooltip prop="SafetyCost"></el-table-column>
                            <el-table-column label="车辆使用费" align="center" show-overflow-tooltip prop="VehicleCost"></el-table-column>
                            <el-table-column label="其它间接费" align="center" show-overflow-tooltip prop="OtherIndirectCost"></el-table-column>
                            <el-table-column label="间接费用占比" align="center" show-overflow-tooltip prop="IndirectTotalCostRate">
                                <template slot-scope="slot">
                                    {{ percentagetoFixed(slot.row.IndirectTotalCostRate) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="经营费" align="center" show-overflow-tooltip prop="OperatingCost"></el-table-column>
                            <el-table-column label="经营费用占比" align="center" show-overflow-tooltip prop="OperatingCostRate">
                                <template slot-scope="slot">
                                    {{ percentagetoFixed(slot.row.OperatingCostRate) }}
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="合计" align="center" show-overflow-tooltip prop="TotalCost">
                                <template slot-scope="slot">
                                    {{ TaxPaytoFixed(slot.row.TotalCost) }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <div class="block">
                <el-pagination
                        @size-change="formdata"
                        @current-change="formdata"
                        :current-page.sync="pagination.currentPage"
                        :page-sizes="pagination.pagesizes"
                        :page-size.sync="pagination.pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total.sync="pagination.total">
                </el-pagination>
            </div>
        </el-collapse>
    </div>
</template>

<script>
    export default {
        name: "ProjectExpensesReport",
        props: {
            AllProject: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                activeNames: ['1', '2'],
                selectfrom: {
                    Start: '',
                    End: '',
                    ProjectType: 0,
                    Project: 0,
                },
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
            }
        },
        created() {
            this.InitDate();
            this.formdata()
        },
        methods: {
            InitDate() {
                const endDate = this.getFormatDate(new Date()).substr(0, 11)
                const beginDate = this.getFormatDate(new Date(new Date() - 3600 * 1000 * 24 * 30)).substr(0, 11)

                console.log(beginDate)
                console.log(endDate)
                this.selectfrom.Start = beginDate;
                this.selectfrom.End = endDate;
            },
            // 获取当前时间
            getFormatDate(date) {
                var month = date.getMonth() + 1
                var strDate = date.getDate()
                if (month >= 1 && month <= 9) {
                    month = '0' + month
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = '0' + strDate
                }
                var currentDate = date.getFullYear() + '-' + month + '-' + strDate + '';
                return currentDate
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            // 初始数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Report/GetProjectExpensesReportData', {
                    from: this.selectfrom,
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                }).then(res => {
                    loadding.close();
                    this.tableData = res.data.data
                    this.pagination.total = res.data.count
                })
            },
            //时间转化
            fmtDateNew(val) {
                if (val != '' && val != null) {
                    let newtime = val.split(' ')[0]
                    return newtime
                } else {
                    return ''
                }
            },
            //获取客户名称
            GetCustomerName(val) {
                let name = ''
                for (let i = 0; i < this.AllCustomer.length; i++) {
                    if (this.AllCustomer[i].Id == val) {
                        name = this.AllCustomer[i].CustomerName
                        return name
                    }
                }
            },
            //小数点保留
            TaxPaytoFixed(val) {
                let data = ''
                if (val != '') {
                    data = val.toFixed(2)
                }
                return data
            },
            percentagetoFixed(val) {
                let data = ''
                if (val != '') {
                    data = val.toFixed(2)
                    data += '%'
                }
                return data
            },
        },
    }
</script>

<style scoped>
    .block{
        float: right;
    }
</style>
